<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" href="./images/favicon16.png" th:href="@{/images/favicon16.png}" type="image/png" sizes="16x16">
    <link rel="icon" href="./images/favicon32.png" th:href="@{/images/favicon32.png}" type="image/png" sizes="32x32">
    <link rel="icon" href="./images/favicon.ico" th:href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="shortcut icon" href="./images/favicon.ico" th:href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="bookmark" href="./images/favicon.ico" th:href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="./style/login.css" th:href="@{/style/login.css}" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
    <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>MONITORING</h2>
            <p>云监控平台</p>
        </div>
        <form class="layadmin-user-login-box layadmin-user-login-body layui-form" th:action="@{/doLogin}" method="post">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                       for="LAY-user-login-username"></label>
                <input type="text" name="account" id="LAY-user-login-username" lay-verify="account" placeholder="账号"
                       class="layui-input" autocomplete="on" lay-verType="tips">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                       for="LAY-user-login-password"></label>
                <input type="password" name="password" id="LAY-user-login-password" lay-verify="password"
                       placeholder="密码" class="layui-input" lay-verType="tips">
            </div>
            <div class="layui-form-item" th:if="${param.error}">
                <label style="color: red;">
                    账号或密码错误，请重新输入！
                </label>
            </div>
            <div class="layui-form-item" th:if="${param.expire}">
                <label style="color: red;">
                    此账号已被管理员修改，您被迫下线！
                </label>
            </div>
            <div class="layui-form-item" th:if="${param.timeout}">
                <label style="color: red;">
                    登录已超时，请重新登录！
                </label>
            </div>
            <div class="layui-form-item" style="margin-bottom: 20px;">
                <input type="checkbox" name="remember-me" lay-skin="primary" title="记住我">
                <!--<a href="javascript:;" class="layadmin-user-jump-change layadmin-link"
                   style="margin-top: 7px;">忘记密码？</a>-->
            </div>
            <div class="layui-form-item">
                <button type="submit" class="layui-btn layui-btn-fluid" lay-submit>登 入</button>
            </div>
        </form>
    </div>
    <div class="layui-trans layadmin-user-login-footer">
        <p>Copyright 2020-2025 by PIFENG</p>
        <p>
            <span>
                <a href='https://gitee.com/monitoring-platform/monitoring' target="_blank">
                Fork me on Gitee
                </a>
            </span>
        </p>
    </div>

    <!--<div class="ladmin-user-login-theme">
      <script type="text/html" template>
        <ul>
          <li data-theme=""><img src="{{ layui.setter.base }}style/res/bg-none.jpg"></li>
          <li data-theme="#03152A" style="background-color: #03152A;"></li>
          <li data-theme="#2E241B" style="background-color: #2E241B;"></li>
          <li data-theme="#50314F" style="background-color: #50314F;"></li>
          <li data-theme="#344058" style="background-color: #344058;"></li>
          <li data-theme="#20222A" style="background-color: #20222A;"></li>
        </ul>
      </script>
    </div>-->

</div>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript" charset="utf-8">
    layui.use('form', function () {
        var form = layui.form;
        //自定义验证规则
        form.verify({
            account: function (value) {
                if (value.length === 0) {
                    return '账号不能为空！';
                }
            },
            password: function (value) {
                if (value.length === 0) {
                    return '密码不能为空！';
                }
            }
        });
    });
</script>
</body>
</html>